<div id="report_forms">
	<link rel="stylesheet" href="./pages/content/systemManager/xxlJob/jobIndex.css">
	<yu-panel :title="$t('jobIndex.ddzx')">
		<el-row :gutter="10">
			<el-col :span="8">
				<div class="rwzx-gridContent blue">
					<i class="el-icon-yx-flag"></i>
					<div>
						<div>
							<p>{{ $t('jobIndex.rwsl') }}</p>
							<h5 id="jobInfoCount">0</h5>
						</div>
						<p>{{ $t('jobIndex.ddzxyxdrwsl') }}</p>
					</div>

				</div>
			</el-col>
			<el-col :span="8">
				<div class="rwzx-gridContent warning">
					<i class="el-icon-yx-calendar"></i>
					<div>
						<div>
							<p>{{ $t('jobIndex.ddcs') }}</p>
							<h5 id="jobLogCount">0</h5>
						</div>
						<p>{{ $t('jobIndex.ddzxcfdddcs') }}</p>
					</div>
				</div>
			</el-col>
			<el-col :span="8">
				<div class="rwzx-gridContent success">
					<i class="el-icon-yx-equalizer"></i>
					<div>
						<div>
							<p>{{ $t('jobIndex.zxqsl') }}</p>
							<h5 id="executorCount">0</h5>
						</div>
						<p>{{ $t('jobIndex.ddzxzxdzxqjqsl') }}</p>
					</div>
				</div>
			</el-col>
		</el-row>
		<div id="yu-rwzxBox" :style="{height: height - 200 + 'px'}">
			<div class="yu-rwzxBoxheader">
				<h2>{{ $t('jobIndex.ddbb') }}</h2>
				<el-popover ref="popover4" placement="bottom" v-model="timepvisible" width="200" trigger="click">
					<ul id="timepopover">
						<li>{{ $t('jobIndex.jr') }}</li>
						<li>{{ $t('jobIndex.zr') }}</li>
						<li class="yu-rwzxLiactive">{{ $t('jobIndex.by') }}</li>
						<li>{{ $t('jobIndex.sgy') }}</li>
						<li>{{ $t('jobIndex.zjyz') }}</li>
						<li>{{ $t('jobIndex.zjyy') }}</li>
						<template>
							<div class="block">
								<el-date-picker v-model="value" type="datetimerange" range-:separator="$t('jobIndex.z')" start-:placeholder="$t('jobIndex.ksrq')"
								 end-:placeholder="$t('jobIndex.jsrq')" align="right">
								</el-date-picker>
							</div>
						</template>
						<div>
							<el-button type="success" @click="selectDateFn">{{ $t('jobIndex.qr') }}</el-button>
							<el-button type="info" @click="timepvisible = false">{{ $t('jobIndex.qx') }}</el-button>
						</div>
					</ul>

				</el-popover>
				<el-button v-popover:popover4 class="el-icon-yx-calendar"></el-button>
			</div>
			<div id="yu-rwzxChartBox" :style="{height: height - 280 + 'px'}">
				<div id="yu-rwzxchartBox1" :style="{height: height - 280 + 'px',width: width + 'px'}"></div>
				<div id="yu-rwzxchartBox2" :style="{height: height - 280 + 'px',width: width2 + 'px'}"></div>
			</div>
		</div>
	</yu-panel>
</div>